@include('Home.head')

<style>
    .page-left{
        width: 20%;
        float: left;
        background: #f9f9f9;
        height: 100%;
    }
    .page-left-list{
        width: 100%;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
    }
    .page-left-list-active{
        color: #d2393b;
        border-left: 4px solid #d2393b;
    }
    .page-right{
        width: 80%;
        float: left;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
    }
    .page-right-list{
        width: 45%;
        margin: 10px 2.5%;
        float: left;
        border-radius: 10px;
        background: #F9F9F9;
    }
    .right-list-image img{
        width: 100%;
        height: 150px;
        border-radius: 10px 10px 10px 10px;
    }
    .right-list-title{
        width: 100%;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        font-size: 16px;
        color: #333333;
    }
    .right-list-oldprice{
        color: grey;
        font-size: 13px;
        text-decoration: line-through
    }
    .right-list-price{
        color: #d2393b;
        font-size: 14px;
        margin: 5px 0;
    }
    .right-list-buy{
        background: #d2393b;
        color: #ffffff;
        width: 60%;
        height: 25px;
        line-height: 25px;
        border-radius: 15px;
        text-align: center;
    }

</style>

<body>

<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default" style="background-color: #409eff;">
        <div class="am-header-left am-header-nav">
            <a  onclick="javascript:history.back(-1);" class="">
                <i style="font-weight: 500;font-size: 18px;font-style:normal; ">返回</i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="" style="font-weight: 600;">@{{title}}</a>
        </h1>
    </header>
    <div style="margin: 10px;">
        <el-input v-model="keyword"  placeholder="请输入搜索关键字">
            <el-button slot="append" icon="am-icon-search" v-on:click="search()"></el-button>
        </el-input>
    </div>
    <!-- banner -->

    <div class="am-cf am-g">
        <div class="page-left">
            <div class="page-left-list" :class="{'page-left-list-active':val===0}"  v-on:click="chooseType(0)">
                全部商品
            </div>
            <div class="page-left-list" :class="{'page-left-list-active':val===item.category_id}" v-for="item in classify" v-on:click="chooseType(item.category_id)">
                @{{ item.category_name }}
            </div>

        </div>
        <div class="page-right" id="right-list" >
            <div class="page-right-list"  v-loading="loading" v-for="item in goodsList" v-on:click="jump(item.sku_id)">
                <div class="right-list-image">
                    <img :src="item.sku_image">
                </div>
                <div class="right-list-title">
                    @{{ item.sku_name }}
                </div>

                <div class="right-list-price">
                    会员价：<span style="font-weight: 700;">@{{ item.price }}</span>
                </div>
                <div class="right-list-oldprice">
                    市场价：@{{ item.market_price }}
                </div>
                <div class="right-list-price">
                    起购量：@{{ item.min_num }}
                </div>
                <div class="right-list-buy"  style="float: right">
                    立即购买
                </div>
            </div>


        </div>

    </div>
    {{--<li class="layui-flow-more" v-if="loading">加载中</li>--}}
    {{--<li class="layui-flow-more" v-if="loading==false">没有更多了</li>--}}

    @include('Home.foot')

</div>

</body>
<script>

    var app = new Vue({

        el:"#app",

        data: {

            img1:'',
            title:'',
            goodsList : [],
            goods:[],
            goods1:[],
            imagelist:[],
            cid:3,
            rotation:[],
            keyword:'',
            classify:{},
            page: 0, //总页数
            nowPage: 1, //本页
            loading: false, //异步加载时的限制
            val:0
        },

        //事件

        methods: {


            classify1:function () {

                //获取商品数据

                $.post("/home/index/classification",{'_token':'{{csrf_token()}}'},function (res) {

                    if(res.code == 1){

                        app.classify = res.data;

                    } else if(res.code == 0) {
                        layer.msg(res.data,{icon:7});
                    }

                });

            },
            handleScroll: function (e) {
                let conScrollHeight = e.target.scrollHeight   // 可以滚动区域的高度
                let conClientHeight = e.target.clientHeight   // 区域内容的高度
                let conScrollTop = e.target.scrollTop        //  内容滚动了的高度
                // 内容滚动了的高度 +  区域内容的高度 >= 可以滚动区域的高度
                // 则证明滑动到了页面底部，这个时候就去处理加载更多的逻辑
                if (conScrollTop + conClientHeight + 50 >= conScrollHeight && app.nowPage < app.page && app.loading === false) {
                    app.loading = true;
                        $.get("/home/index/goods_list", {
                            '_token': '{{csrf_token()}}',
                            category_id:app.val,
                            page: app.nowPage + 1,
                            type:app.type,
                            keyword:app.keyword
                        }, function (res) {
                            app.goodsList = [...app.goodsList, ...res.data.data];
                            app.nowPage = res.data.current_page;
                            app.loading = false;
                        });
                }
            },
            initialize:function () {
                $.post("/home/index/goods_list", {
                    '_token': '{{csrf_token()}}',keyword:"",category_id:0,
                }, function (res) {
                    if (res.code) {
                        app.goodsList = res.data.data;
                        app.page = res.data.last_page;
                        app.nowPage = res.data.current_page;
                    } else {
                        layer.msg(res.data);
                    }
                });

                $.post("/home/index/token", {'_token': '{{csrf_token()}}'}, function (res) {
                    // console.log(res)
                    // if (res.code == 1) {
                    // app.goods = res.data;
                    // } else {
                    //    layer.msg(res.data,{icon:7});
                    // }
                });

            },


            chooseType(category_id){
                app.val = category_id;
                app.page = 0;
                let doc =  document.getElementById ('right-list')
                doc.scrollTop = 0
                this.getGoods();
            },
            getGoods:function(){
                app.loading = true
                $.post("/home/index/goods_list ",{'_token':'{{csrf_token()}}',category_id:app.val,keyword:app.keyword},function (res) {

                    if(res.code == 1){
                        app.goodsList = res.data.data;
                        app.page = res.data.last_page;
                        app.nowPage = res.data.current_page;
                        app.loading = false
                    } else {
                        app.loading = false
                        layer.msg(res.data,{icon:7});


                    }

                });
            },
            search:function(){
                //获取商品数据
                var id = this.obtain('cid');
                $.post("/home/index/goods_list ",{'_token':'{{csrf_token()}}',keyword:app.keyword,category_id:app.val},function (res) {

                    if(res.code == 1){
                        app.goodsList = res.data.data

                        if (res.data.length > 3) {
                            for (var i = 0; i < 3; i++) {
                                var datas = {
                                    goods_thumb: '',
                                    gid: 0
                                };
                                datas.goods_thumb = app.goodsList[i].goods_thumb;
                                datas.gid = app.goodsList[0].id;
                                app.rotation.push(datas);
                            }
                        }else{
                            for (var i = 0; i < res.data.length; i++) {
                                var datas = {
                                    goods_thumb: '',
                                    gid: 0
                                };
                                datas.goods_thumb = app.goodsList[i].goods_thumb;
                                datas.gid = app.goodsList[0].id;
                                app.rotation.push(datas);
                            }
                        }

                    } else {

                        layer.msg(res.data,{icon:7});

                    }

                });

            },

            //跳转
            classGood:function(val){
                $.post("/home/index/getShopGoods",{'_token':'{{csrf_token()}}',id:val},function (res) {
                    if(res.code == 1){
                        app.goodsList = res.data;
                    } else if(res.code == 0) {
                        layer.msg(res.data,{icon:7});
                    }

                });

            }
            ,
            classGood1:function(val){
                $.post("/home/index/classify",{'_token':'{{csrf_token()}}',class:'find',cid:val},function (res) {
                    if(res.code == 1){
                        app.goodsList = res.data.data;
                        app.page = res.data.last_page;
                        app.nowPage = res.data.current_page;
                        app.val = val;
                    } else if(res.code == 0) {
                        layer.msg(res.data,{icon:7});
                    }

                });
                window.location.href="http://hb.baoliy168.com/shop/index/case"
            }
            ,
            jump:function (goods_id) {

                window.location.href="/home/index/details?goods_id="+goods_id;
                // window.location.href="/home/microShop/index"
            },
            jump1:function () {

                //window.location.href="/home/excellent/product?id="+id;
                window.location.href="/home/microShop/index"
            },

            //获取url id

            obtain:function (val) {

                var query = window.location.search.substring(1);

                var vars = query.split("&");

                for (var i=0;i<vars.length;i++) {

                    var pair = vars[i].split("=");

                    if(pair[0] == val){

                        return pair[1];

                    }

                }

            },

        },

        //自动执行

        mounted: function () {

            this.initialize();
            this.classify1();

        },

    })

    //添加滚动事件
    window.onload = function () {
        let doc =  document.getElementById ('right-list')
        doc.addEventListener('scroll', app.handleScroll)
        
        const height = window.innerHeight - 100 - 60;
        $('.page-left').css('height',height+'px');
        $('.page-right').css('height',height+'px');
    }

</script>

</html>

